<template>
<div class="menu">
  <el-card style="width: 100%;">
    <div class="title"><span >{{MenuData.AdminMenuList.Head}}</span></div>
    <el-row class="tac" >
      <el-col :span="12">
    <el-menu
        background-color="transparent"
        class="el-menu-vertical-demo"
        :router="true"
        v-for="(item,index) in MenuData.AdminMenuList.menuList"
        :key="index"
        :default-active="$route.path"
    >
      <el-menu-item :index="item.path">
        <span>{{item.title}}</span>
      </el-menu-item>
    </el-menu>
      </el-col>
    </el-row>
  </el-card>
</div>
</template>

<script setup>
  let MenuData=defineProps(["AdminMenuList"])
</script>

<style scoped>
.menu{
  width: 120px;
  height: 100vh;
  /*position: absolute;*/
  display: flex;
  position: fixed;
  top: 70px;
  bottom: 0;
  /*position: fixed;*/
  /*margin-right: 50px;*/

}
.el-menu{
  border: none;
}
.el-menu-vertical-demo{
  width:120px ;
}
/*去掉el-cord的padding*/
>>>.el-card__body {
  padding: 0;
}
.el-menu-item{
  height: 45px;
}
.el-menu-item.is-active{
  background-color: #f5f5f5 !important;
}
.title{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
</style>
